<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page language="java" pageEncoding="UTF-8" %>
<% String path = request.getContextPath();%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="Keywords" content=""/>
    <meta name="author" content="liaowz">
    <title>文章管理</title>
    <%--<link rel="icon" href="">--%>
    <link rel="stylesheet" href="<%=path%>/resources/css/bootstrap.css"/>
    <script type="text/javascript" src="<%=path%>/resources/js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="<%=path%>/resources/js/bootstrap.min.js"></script>

    <script>
        //        $("#article-type1").change(function(){
        //            if($("#article-type1").prop("checked")){
        //
        //            }else{
        //
        //            }
        //        })

        function getArgs() {
            var xx = window.location.href;
            var args = new Object(); //声明一个空对象
            var query = xx.substring(xx.search(/\?/g) + 1); // 取查询字符串，如从 http://www.snowpeak.org/testjs.htm?a1=v1&a2=&a3=v3#anchor 中截出 a1=v1&a2=&a3=v3。
            var pairs = query.split("&"); // 以 & 符分开成数组
            for (var i = 0; i < pairs.length; i++) {
                var pos = pairs[i].indexOf('='); // 查找 "name=value" 对
                if (pos == -1) continue; // 若不成对，则跳出循环继续下一对
                var argname = pairs[i].substring(0, pos); // 取参数名
                var value = pairs[i].substring(pos + 1); // 取参数值
                value = decodeURIComponent(value); // 若需要，则解码
                args[argname] = value; // 存成对象的一个属性
            }
            return args; // 返回此对象
        }
        function getArgsValues() {
            var xx = window.location.href;
            var args = new Array(); //声明一个空对象
            var query = xx.substring(xx.search(/\?/g) + 1); // 取查询字符串，如从 http://www.snowpeak.org/testjs.htm?a1=v1&a2=&a3=v3#anchor 中截出 a1=v1&a2=&a3=v3。
            var pairs = query.split("&"); // 以 & 符分开成数组
            for (var i = 0; i < pairs.length; i++) {
                var pos = pairs[i].indexOf('='); // 查找 "name=value" 对
                if (pos == -1) continue; // 若不成对，则跳出循环继续下一对
                var argname = pairs[i].substring(0, pos); // 取参数名
                var value = pairs[i].substring(pos + 1); // 取参数值
                value = decodeURIComponent(value); // 若需要，则解码
                args[i] = value; // 存成对象的一个属性
            }

            for (var j = 0; j < args.length; j++) {
                $(".article-type").each(function (index, item) {

                    if($(item).val() == args[j]){
                        $(item).prop("checked",false);
                    }
                });
            }

            $(".article-type").each(function (index, item) {
                if ($(item).prop("checked")) {
                    $(item).prop("checked",false);
                }else{
                    $(item).prop("checked",true);
                }
            });

        }

        $(document).ready(function(){
            getArgsValues();
        });


        function search() {
            var parms = "?";
            var s = 0;
            $(".article-type").each(function (index, item) {
                if ($(item).prop("checked")) {
                    s++;
                    parms += "p" + index + "=" + $(item).val() + "&";
                }
            });
            if (s == 0) {
                parms = "";
            } else {
                parms = parms.substring(0, parms.length - 1);
            }
            <%--alert("<c:url value="/article/articles"/>"+parms);--%>
            window.location.href = "<c:url value="/article/articles"/>" + parms;
        }

    </script>

</head>
<body class="theme-satgreen" data-theme="theme-satgreen">

<div class="main">

    <%-- 导航start --%>
    <ul class="nav nav-tabs">
        <li role="presentation" class="active"><a href="javascript:">文章管理</a></li>
    </ul>
    <%-- 导航end --%>

    <div class="box">
        <div class="box-title">
            <h3>文章列表</h3>
        </div>
        <button class="btn btn-info" onclick="window.location='<c:url value="/article/add"/>'">新建文章</button>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

        <c:forEach var="type" items="${articleTypes}" varStatus="vstatus">
            <input id="article-type${vstatus.index}" class="article-type" type="checkbox" checked
                   value="${type.name}"/>&nbsp; ${type.name}
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        </c:forEach>

        <button class="btn btn-info" onclick="search();">查询</button>
    </div>

    <br>

    <div class="panel panel-default">
        <div class="panel-heading">文章列表：</div>
        <%--<div class="panel-body">--%>
        <%--<p>内容描述</p>--%>
        <%--</div>--%>

        <!-- Table -->
        <table class="table">
            <thead>
            <tr>
                <th>id</th>
                <th>用户</th>
                <th>文章名称</th>
                <th>分类</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>

            <c:forEach var="article" items="${articles}">
                <tr>
                    <td>${article.id}</td>
                    <td>${article.user.userName}</td>
                    <td>${article.title}</td>
                    <td>${article.articleType.name}</td>
                    <td>
                        <a href="<c:url value="/article/detail"/>?id=${article.id}">查看</a>
                        <a href="<c:url value="/article/delete"/>?id=${article.id}">删除</a>
                    </td>
                </tr>
            </c:forEach>

            </tbody>
        </table>
    </div>

</div>
</body>
</html>